모래위키:문법 도움말_{(r1 문단 편집)}

[오류!] 편집 권한이 부족합니다. 로그인된 사용자(이)여야 합니다. 해당 문서의 ACL 탭을 확인하시기 바랍니다.
윗 줄에 아무 내용이 없어 리스트 문법이 적용되지 않는 리스트입니다.
그 아래부터는 윗 줄에 아무 내용이 존재하여 리스트 문법이 깨지지 않습니다.
예시	`##@ 편집 창에서만 노출 기능 예시입니다.([[나무위키:문법 도움말#s-17\|17번 문단]]을 참고하시기 바랍니다.)`
결과	이런 식으로 편집할 시에만 노출됩니다.(17번 문단을 참고하시기 바랍니다.)
== 이미지 파일 ==
[include(틀:다른 뜻, 설명1=이미지 업로드, 문서명1=나무위키:기능 도움말, 앵커1=이미지 업로드, 설명2=이미지 파일에 링크 거는 방법, 문서명2=나무위키:문법 도움말, 앵커2=하이퍼링크)]
[[나무위키:기능 도움말#이미지 업로더|파일 업로더]]를 통해 생성한 파일 문서의 이미지 파일을 문서 내에 출력할 수 있습니다. 또한 매개변수를 이용해 이미지의 속성을 지정할 수 있습니다. 문서 내에 출력된 이미지 파일은 해당 이미지 파일의 파일 문서로의 하이퍼링크 기능도 겸합니다.

외부 이미지를 업로드하지 않고 나무위키 문서 내에 출력하는 방법은 없습니다.

{{{#!wiki style="word-break: keep-all"
이미지 파일을 삽입하는 기본 문법은 아래와 같습니다.
||<tablebgcolor=transparent><rowbgcolor=#00a495,#00a495><rowcolor=#fff><-2><width=10%> 유형 || 입력 || 비고 ||
||<-2> 기본 || {{{[[파일:example.png]]}}}[* 앞 또는 뒤에 공백을 넣은 {{{[[ 파일:example.png]]}}}, {{{[[파일:example.png ]]}}} 이러한 형식도 작동은 하지만 '''권장하지 않습니다.'''] ||이미지를 문서에 직접 출력하지 않고 '''텍스트 하이퍼링크'''로 하고자 하는 경우, 맨 앞에 쌍점(:)을 붙여 {{{[[:파일:example.png]]}}}와 같이 작성합니다. ||
||<|2> 매개변수 포함 || 단일 || {{{[[파일:example.png|매개변수]]}}} ||{{{[[파일:example.png|width=숫자]]}}}와 같이 사용합니다.||
|| 중첩 || {{{[[파일:example.png|매개변수1&매개변수2&...]]}}} ||{{{[[파일:example.png|width=숫자&align=위치]]}}}와 같이 매개변수 사이에 앰퍼샌드(&) 구분자를 넣어 사용합니다.||}}}
매개변수의 종류와 사용법은 아래와 같습니다.
{{{#!wiki style="word-break: keep-all"
||<tablebgcolor=transparent><rowbgcolor=#00a495,#00a495><rowcolor=#fff><-2> 유형 || 매개변수 || 비고 ||
||<|2> 픽셀 지정 || 너비 || {{{width=숫자}}} ||<|2>문서에 삽입된 이미지는 화면을 넘어가지 않는 한 원래 크기로 출력됩니다.[br][br]이미지의 크기를 높이(height) 변경으로 지정하는 것은 권장되지 않습니다. 되도록이면 너비(width) 변경으로 지정해 주세요.[br][br]{{{width}}} 변수와 {{{height}}} 변수를 동시에 사용하면 이미지 비율이 달라질 수 있는데 아래 {{{object-fit}}} 매개변수를 사용하면 원본 비율을 유지할 수 있습니다.||
|| 높이 || {{{height=숫자}}} ||
||<|2> 비율 지정 || 너비 || {{{width=숫자%}}} ||<|2>사이트나 표의 고정폭 대비 이미지 파일의 너비나 높이의 비율을 지정합니다.[br][br]{{{#red '''주의'''}}}: {{{width=숫자%}}}만 삽입하는 경우에는 [[반응형 웹|사용자가 보고 있는 화면 폭에 대한 비율로 이미지가 출력되므로]] 임의의 사용자가 보기 좋은 적정 너비 선정이 어렵습니다. 표에 넣지 않고 단독으로 이미지 너비 지정을 할 경우 가능한 한 절대 수치를 이용해주세요.[br][br]표에 이미지를 추가하려는 경우에는 테이블 절대폭 문법[* [[#테이블의 크기와 색상|테이블의 크기와 색상]] 문단 참고.]과 함께 이미지 상대폭 문법을 사용하면 __설정한 테이블 절대폭에 대한__ 이미지 상대폭이 지정되므로 결과적으로 이미지 너비를 고정하는 효과를 얻을 수 있습니다.||
|| 높이 || {{{height=숫자%}}} ||
||<-2> 정렬 지정 || {{{align=위치}}} ||'위치'의 종류는 수평 정렬과 수직 정렬이 있으며, 각각 아래와 같이 세 종류가 있습니다.
왼쪽 정렬: {{{left}}} / 가운데 정렬: {{{center}}} 또는 {{{middle}}} / 오른쪽 정렬: {{{right}}}
||
||<-2> 배경색 지정 || {{{#!wiki style="word-break: break-all"
{{{bgcolor=#RRGGBB}}}}}} ||라이트 테마 또는 다크 테마를 고려해 투명한 값이 있는 파일의 배경색을 지정할 수 있습니다.||
||<-2> 라이트{{{#!html &#8203}}}/{{{#!html &#8203}}}다크 모드 지정 || {{{theme=상태}}} ||파일을 라이트 모드 또는 다크 모드에서만 출력되도록 지정할 수 있습니다. '상태'에는 다음과 같은 값을 입력하며, 지정하지 않으면 라이트 모드와 다크 모드 모두에서 표시됩니다.

 * 라이트 모드: {{{light}}}
 * 다크 모드: {{{dark}}}
||
||<-2> 모서리 곡률 지정 || {{{border-radius=픽셀}}} ||이미지 파일의 모서리 곡률을 지정할 수 있는 문법입니다. ||
||<-2> 픽셀화 || {{{rendering=pixelated}}} ||비트맵 이미지는 자동으로 [[안티에일리어싱]]이 적용되어 나오는데, 이를 적용되지 않게 해 줍니다. 픽셀의 수가 적은 비트맵 이미지를 확대하면 이 [[안티에일리어싱]]으로 인해 이미지가 흐리게 나오는데, 이를 선명하게 표시하여야 할 때 유용한 속성입니다. [[https://namu.wiki/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EC%97%B0%EC%8A%B5%EC%9E%A53?uuid=77be74b2-da44-43ba-8345-50dc146ac0b9|예시]] ||
||<-2><|5> 크기 맞춤 || {{{object-fit=fill}}} ||{{{#!wiki style="display: flex"
{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
[[파일:나무위키:로고1.png|width=120&height=120&object-fit=fill]]
}}} {{{#!wiki style="margin-top: -15px"
{{{원본: 200x100
매개변수: width=120&height=120&object-fit=fill
}}} 지정된 너비와 높이에 맞게 이미지가 늘려서 조절됩니다. 이미지가 왜곡될 수 있습니다. 기본값입니다. svg 파일은 {{{object-fit=contain}}}으로 표시됩니다.}}}}}} ||
|| {{{object-fit=contain}}} ||{{{#!wiki style="display: flex"
{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
[[파일:나무위키:로고1.png|width=120&height=120&object-fit=contain]]
}}} {{{#!wiki style="margin-top: -15px"
{{{원본: 200x100
매개변수: width=120&height=120&object-fit=contain
}}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이 내에 포함되도록 조절됩니다. 여백이 생길 수 있습니다.}}}}}} ||
|| {{{object-fit=cover}}} ||{{{#!wiki style="display: flex"
{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
[[파일:나무위키:로고1.png|width=120&height=120&object-fit=cover]]
}}} {{{#!wiki style="margin-top: -15px"
{{{원본: 200x100
매개변수: width=120&height=120&object-fit=cover
}}} 이미지의 원본 비율을 유지하면서 지정된 너비와 높이를 모두 채우도록 조절됩니다. 이미지가 잘릴 수 있습니다.}}}}}} ||
|| {{{object-fit=none}}} ||{{{#!wiki style="display: flex"
{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
[[파일:나무위키:로고1.png|width=120&height=120&object-fit=none]]
}}} {{{#!wiki style="margin-top: -15px"
{{{원본: 200x100
매개변수: width=120&height=120&object-fit=none
}}} 이미지의 원본 크기[* 예시 이미지의 실제 이미지 크기는 400x200인데 나무위키 엔진 이미지 최적화로 인해 0.5배인 200x100이 이미지 소스로 사용되어 200x100을 유지합니다.]를 유지하면서 지정된 너비와 높이 가운데에 위치됩니다.}}}}}} ||
|| {{{object-fit=scale-down}}} ||{{{#!wiki style="display: flex"
{{{#!wiki style="border: 2px solid #888; background: #ddd; margin-right: 10px; height: fit-content"
[[파일:나무위키:로고1.png|width=120&height=120&object-fit=scale-down]]
}}} {{{#!wiki style="margin-top: -15px"
{{{원본: 200x100
매개변수: width=120&height=120&object-fit=scale-down
}}} none과 contain 중 크기가 작은 쪽으로 선택됩니다. 이미지 크기를 늘리지 않으면서 잘리지 않게 포함할 때 사용합니다.}}}}}} ||
}}}
모바일에선 최대로 보이게 하려고 PC에서 파일의 너비를 최대로 하거나, PC에서 파일의 너비를 적절하게 설정했지만 모바일에선 가로로 슬라이드해서 이미지를 봐야 하는 상황을 막기 위해 다음과 같이 할 수 있습니다.
{{{||<width=숫자> [[파일:example.png|width=100%]] ||
}}}
이렇게 하면 PC에선 적절한 너비로 볼 수 있고, 모바일에선 화면 크기에 맞춘 이미지를 볼 수 있으며, 아래에 이미지가 있다면 적절한 간격으로 떨어지는 효과를 볼 수 있습니다. 추가로 {{{<tablealign=center / right>}}}를 사용해 이미지의 위치도 지정할 수 있게 됩니다. 틀의 배경이 불편하다면 다음과 같이 사용할 수 있습니다.
{{{||<width=숫자><nopad> [[파일:example.png|width=100%]] ||
}}}이렇게 하면 틀의 배경이 보이지 않으면서 위의 효과들을 볼 수 있고, {{{<tablebordercolor=색깔>}}}을 이용한다면 적절한 테두리 색까지 입힐 수 있게 됩니다.
[각주]
모래위키:문법 도움말(r1 문단 편집)

모래위키:문법 도움말_{(r1 문단 편집)}
